import React, { Component } from 'react';
import ListCss from './index.module.css';

export default class List extends Component {
  render() {
    const { todos, deleteTodoItem, editTodoItem } = this.props;
    return (
      <ul className={ListCss.container}>
        {todos.map(todo => {
          let styleObj = { textDecoration: `${todo.done ? 'line-through' : 'none'}` }
          return (<li key={todo.id}>
            <div>
              <input type="checkbox" onChange={(ev) => {
                editTodoItem(todo, { done: ev.target.checked })
              }} checked={todo.done} />

              <span style={styleObj} ref={(el) => { this[`span_${todo.id}`] = el; }}>{todo.value}</span>
            </div>

            <button onClick={() => { deleteTodoItem(todo.id) }} disabled={!todo.done}
              className={todo.done ? '' : `${ListCss.disabled}`}
            >删除</button>
          </li>)
        }
        )}
      </ul>
    )
  }
}
